<template>
    <teleport to="body">
        <div class="_toast" v-show="messages.length > 0">
            <div class="_toast-wrap">
                <ToastItem v-for="item in messages" :msgObj="item" :key="item.id" @close="doDel(item.id)" />
            </div>
        </div>
    </teleport>
</template>

<script>
import ToastItem from './ToastItem.vue'
import { useToastStore } from '@/stores/toast'
import { computed } from 'vue'

export default {
    components: {
        ToastItem
    },
    setup() {
        const toastStore = useToastStore()
        const messages = computed(() => toastStore.messages)

        const doDel = (id) => {
            toastStore.del(id)
        }

        return {
            messages,
            doDel
        }
    }
}
</script>

<style lang="scss">
@use './style.scss';
</style>
